/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-26 17:49:48
 * @LastEditors: chenbinfa
 * @LastEditTime: 2022-08-16 17:06:54
 * @description: 描述信息
 * @author: chenbinfa
 */
import React, { useRef, useState, useEffect } from "react";
import {
	DatePicker,
	Input,
	InputNumber,
	Menu,
	Modal,
	Button,
	Tooltip,
	Dropdown,
	Descriptions,
	Select,
	Space,
	Table,
	message,
	Tabs,
	Popconfirm,
	Checkbox,
	Card,
	Form,
	Collapse,
	Empty,
	Spin,
	List
} from "antd";
import { LeftOutlined, DownOutlined, DeleteOutlined, SwapRightOutlined, CheckCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
import styled from "styled-components";
import _ from "lodash";
import { useNavigate, useParams, NavLink } from "react-router-dom";
import api from "@services/";
import { formatArr, formatOne } from "@/utils/format-show-type";
import { toLocaleString } from "@/utils/format";
import moment from "moment";
import common from "@utils/common";
import copy from "copy-to-clipboard";
import SearchBar from "@/components/SearchBar";
import MList from "@/components/mobile/MList";
import { ThTable } from "@/components/ThTable";

const { Panel } = Collapse;


const extrinsicColumns = [
	{
		title: "Account",
		dataIndex: "account",
		key: "account",
		width: "40%",
		textWrap: "word-break",
		ellipsis: true,
		showType: "copyLong-link",
		link: '/account/storage/{account}'
	},
	{
		title: "File Name",
		dataIndex: "file_name",
		key: "file_name",
		width: "40%"
	},
	{
		title: "Time(" + common.getTimeZone() + ")",
		dataIndex: "timestamp",
		key: "timestamp",
		width: "20%",
		showType: "datetime",
		tpl: "fromNow"
	},
];



function Main({ className }) {
	const navigator = useNavigate();
	const { q } = useParams();
	const [loading, setLoading] = useState(false);
	const [detail, setDetail] = useState({});
	const [props, setProps] = useState();


	if (!q) {
		return message.error("fid is not found");
	}
	if (document.getElementById("searchInput")) {
		document.getElementById("searchInput").value = blockHeight;
	}
	//block.detail
	useEffect(async () => {
		setLoading(true);
		let result = await api.file.detail(q);
		setLoading(false);
		if (result.msg != "ok") {
			return message.info(result.err || result.msg);
		}
		// console.log('=============================', result);
		let o1 = formatOne({
			title: "Creator",
			dataIndex: "Creator",
			key: "creator",
			showType: "copyLong-link",
			link: '/account/storage/{Creator}'
		});
		let o2 = formatOne({
			title: "Hash",
			dataIndex: "Hash",
			key: "Hash",
			showType: "copyLong-link",
			link: '/file/{Hash}'
		});
		let o3 = formatOne({
			title: "file_size",
			dataIndex: "file_size",
			key: "file_size",
			showType: "store-size-str"
		});
		let detail = result.data;
		detail.creatorStr = o1.render(detail.Creator, detail);
		detail.hashStr = o2.render(detail.Hash, detail);
		detail.sizeStr = o3.render(detail.file_size, detail);
		setDetail(detail);

		let result2 = await api.file.holders({ fid: q.replace('0x', ''), pageindex: 1, pagesize: 1000 });
		if (result2.msg != 'ok') {
			return message.info(result.err || result.msg);
		}
		result2.data.forEach(t=>t.key=t.account);
		const extrinsicsProps = {
			border: true,
			size: "middle",
			pagesize: 1000,
			hidePager: true,
			table: {
				dataSource: result2.data,
				columns: formatArr(extrinsicColumns)
			}
		};
		setProps(extrinsicsProps);
	}, [q]);

	useEffect(() => {
		common.showAPIUrl();
	}, []);


	return (
		<div className={className}>
			<SearchBar background={"#f4f4f4"} height="100px" />
			<Spin spinning={loading}>
				<Card title={<div><img src="/img/space.png" width={18} /> Fid Info</div>}>
					<div className="table-content">
						<div className="block-list-box2">
							<div className="one-box one-box2">
								<label>Creator</label>
								<span className="link">{detail.creatorStr}</span>
							</div>
							<div className="one-box one-box2">
								<label>Hash</label>
								<span>{detail.hashStr}</span>
							</div>
							<div className="one-box">
								<label>Expiry Date ({common.getTimeZone()})</label>
								<span>{detail.ExpiryDate}</span>
							</div>
							<div className="one-box">
								<label>Size</label>
								<span>{detail.sizeStr}</span>
							</div>
							{/* <div className="one-box">
                                <label>Operation</label>
                                <span className="link" style={{ color: '#0057FF' }}>Download</span>
                            </div> */}
						</div>
					</div>
				</Card>
				<div>
					<div className="top-title">
						<span>
							<img src="/img/holder.png" width={16} />
							&nbsp;&nbsp;
						</span>
						<label>File Holders (4)</label>
					</div>
					<div className="pc-list">
						{props && <ThTable props={props} />}
					</div>
					<div className="mobile-list">
						{props && <MList props={props} />}
					</div>
				</div>
			</Spin>
		</div>
	);
}

export default styled(Main)`
	display: block;
	overflow: hidden;
	padding: 20px;
	margin: 0 auto;
	max-width: 1760px;
	.none{
		display: none;
	}
	.b1 {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		.bt {
			border-top: 4px solid #f0f0f0;
		}
		.br {
			border-right: 4px solid #f0f0f0;
		}
		.bb {
			border-bottom: 4px solid #f0f0f0;
		}
		.bl {
			border-left: 4px solid #f0f0f0;
		}
		div {
			border-collapse: collapse;
			text-indent: 10px;
			line-height: 50px;
		}
		.b2-1 {
			width: 100%;
		}
		.b2-2 {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			.b3-1 {
				width: 25%;
			}
			.b3-2 {
				flex: 1;
				display: flex;
				flex-direction: column;
				.b4-1 {
					display: flex;
					flex-direction: row;
					.b5-1 {
						width: 33.33%;
					}
					.b5-2 {
						flex: 1;
					}
				}
				.b4-2 {
					display: flex;
					flex-direction: row;
					align-items: center;
					.b5-1 {
						width: 33.33%;
					}
					.b5-2 {
						flex: 1;
						display: flex;
						flex-direction: column;
						.b6-1 {
							display: flex;
							flex-direction: row;
							.b7-1 {
								width: 50%;
							}
							.b7-2 {
								flex: 1;
							}
						}
						.b6-2 {
							display: flex;
							flex-direction: row;
							.b7-1 {
								width: 50%;
							}
							.b7-2 {
								flex: 1;
							}
						}
					}
				}
				.b4-3 {
					display: flex;
					flex-direction: row;
					.b5-1 {
						width: 33.33%;
					}
					.b5-2 {
						flex: 1;
					}
				}
			}
		}
	}
	.top-title {
		display: block;
		font-size: 18px;
		line-height: 80px;
	}
	.table-content {
		background-color: #fff;
		.ant-descriptions-header {
			margin-bottom: 0 !important;
			padding: 10px;
		}
	}
	pre {
		background-color: #999;
		color: #fff;
		padding: 20px;
	}
	.block-list-box2 {
		position: relative;
		padding: 4px 10px;
		width: 100%;
		line-height: 27px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.one-box {
			width: 25%;
			display: flex;
			flex-direction: column;
			margin: 24px 0;
			label {
				font-size: 13px;
				color: #6b7486;
			}
			span {
				font-size: 18px;
				color: #282e39;
			}
		}
		.one-box2 {
			width: 50% !important;
		}
	}
	@media screen and (min-width: 801px) {
		.pc-list {
			display: block;
		}
		.mobile-list {
			display: none;
		}
	}
	@media screen and (max-width: 800px) {
		.pc-list {
			display: none;
		}
		.mobile-list {
			display: block;
		}
	}
	.o-title {
		display: flex;
		width: 100%;
		margin-top: 40px;
		overflow: hidden;
		flex-direction: row;
		align-items: center;
		span{
			width: 200px;
			height: 50px;
			line-height: 50px;			
			text-align: center;
			overflow: hidden;
			display: block;
			margin-right:10px;
			border-radius: 5px;
		}
		.curr{
			background-color: #000000;
			color: #ffffff;
			cursor: not-allowed;
		}
		.uncurr{
			background-color: #eeeeee;
			color: #aeaeae;
			cursor: pointer;
		}
	}
`;
